<script setup lang="ts">
import type { TabPaneName } from 'element-plus';
import { ref } from 'vue';
import spine from './spine.vue';


let tabIndex = 0;
const editableTabsValue = ref('0')

interface Tab {
	title: string;
	name: TabPaneName;
}

const editableTabs = ref<Array<Tab>>([
	// {
	// 	title: 'spine动画',
	// 	name: '1'
	// }
]);


const handleTabsEdit = (
	targetName: TabPaneName | undefined,
	action: 'remove' | 'add'
) => {

	if (action === 'add') {
		const newTabName = `${++tabIndex}`
		editableTabs.value.push({
			title: 'spine动画',
			name: newTabName
		})
		editableTabsValue.value = newTabName
	} else if (action === 'remove') {
		const tabs = editableTabs.value
		let activeName = editableTabsValue.value as any;
		if (activeName === targetName) {
			tabs.forEach((tab, index) => {
				if (tab.name === targetName) {
					const nextTab = tabs[index + 1] || tabs[index - 1]
					if (nextTab) {
						activeName = nextTab.name
					}
				}
			})
		}

		editableTabsValue.value = activeName
		editableTabs.value = tabs.filter((tab) => tab.name !== targetName)
	}

};

const setName = (index:number,name: string) => {
	console.log(index,name);
	editableTabs.value.forEach((item) => {
		if(item.name == index){
			item.title = name;
		}
	})

}

</script>

<template>
	<el-tabs v-model="editableTabsValue" type="card" editable class="demo-tabs" @edit="handleTabsEdit">
		<el-tab-pane v-for="item in editableTabs" :key="item.name" :label="item.title" :name="item.name">
			<spine @setName="setName" :index="item.name"></spine>
		</el-tab-pane>
	</el-tabs>

	<el-empty description="请点击右上角的添加按钮-添加动画" v-if="editableTabs.length == 0" />


</template>

<style>
/* .demo-tabs>.el-tabs__content {
	
} */

.el-tabs__new-tab{
	margin-right: 20px;
}

.el-tabs__header{
	margin-bottom: 2px!important;
}

</style>
